<template>
	<view @click="go('search','tabIndex=0')" sticky top-0 z-100 bg-white>
		<uni-search-bar radius="5" placeholder="请输入搜索关键词" ref="searchBar" cancelButton="none" readonly />
	</view>
	<view class="page page-mall">
		<template v-if="swiperList.length">
			<swiper class="swiper-wrap" circular :indicator-dots="true" :autoplay="true" ml-10px mr-10px >
				<swiper-item v-for="item in swiperList">
					<image class="image w-full" :src="item.image" mode="aspectFill" @click="goPage(item)"></image>
				</swiper-item>
			</swiper>
		</template>	

		<template v-if="goodsCatList.length">
			<swiper :class="`${goodsCatList.length==1 && goodsCatList[0].length<6 ? 'h-160':' h-320'}`">
				<swiper-item v-for="(f,k) in goodsCatList" :key="k">
					<view class="goods-cat-wrap">
						<view class="cat-item" v-for="v in f" :key="v.id" @click="goProductList(v)">
							<image v-if="v.icon_thumb" class="cat-img" :src="v.icon_thumb" mode="aspectFill" />
							<image v-else class="cat-img" src="@/static/images/category.png" mode="aspectFill" />
							<view text-center pb-10px whitespace-nowrap overflow-hidden>{{ v.name }}</view>
						</view>
						<view class="cat-item" v-for="c in (5-f.length%5)" :key="c"></view>
					</view>
				</swiper-item>
			</swiper>
		</template>
		

		<view class="overflow-auto" pt-5px mb-5px>
			<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>

		<view class="list-wrap" v-if="list.length">
			<template v-for="(v,k) in list" :key="v.shop_id">
				<view class="list-item">
					<image class="logo" :src="v.firm.logo" mode="widthFix" />
					<view class="right">
						<view class="right-head">
							<view>
								<view text-lg fw-600>{{ v.firm_name }}</view>
								<view text-xs c-gray-5>
									<text c-red-5>{{ v.goods_total }}件</text>商品在售
								</view>
							</view>
							<view class="enter-btn bg-orange-5" @click="goStore(v.shop_id)">进店逛逛</view>
						</view>
						<view class="goods">
							<view class="good" v-for="g in v.main_product" :key="g.goods_id" @click="goProduct(g.goods_id)">
								<image class="image" :src="g.image_thumb" mode="aspectFill" />
								<view c-red-7 text-sm>￥{{ g.cost_price || '可议价' }}</view>
							</view>
						</view>
					</view>
				</view>
				<divider spacing="10px"></divider>
			</template>
		</view>
		<view v-else-if="!loading" flex items-center justify-center flex-col py-50px color-gray>
			<view class="icon icon-nodata text-8xl"></view>
			<view pt-10px>暂无数据</view>
		</view>

	</view>

	<tabbar index="2"></tabbar>

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	const globalData = getApp().globalData
	const querys = globalData.tabarQuery
	globalData.tabarQuery = null
	const avatar = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'

	const current = ref(0)
	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
		page_no.value = 1
		loadedAll.value = false
		list.value = []
		getList()
	}

	const goodsCatList = ref([])

	const goProductList = value => {
		uni.navigateTo({
			url: `/pages/product/index?category_id=${value.id}`
		})
	}
	const goProduct = id => {
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}
	
	const goStore = id => {
		uni.navigateTo({
			url: `/pages/store/detail?id=${id}`
		})
	}
	const swiperList = ref([])
	const page_no = ref(1) 
	const page_size = ref(100) 
	const loadedAll = ref(false)
	const loading = ref(false)
	const list = ref([])

	let types = []
	const tabs = ref([])

	async function fn(){
		swiperList.value = await api.getAddList({type: 'shop'})

		const catList = await api.goodsCatList({parent_id: 0})
		goodsCatList.value = chunkArray(catList,10)

		const typeRes = await api.getEnterpriseType()
		types = [ { title: '全部', id: 0 }, ...typeRes ]
		tabs.value = types.map(i => i.title)

		getList()
	}
	fn()

	async function getList() {
		if(loadedAll.value) return
		if(loading.value) return
		loading.value = true
		const data = await api.storeList({
			page_size: page_size.value,
			page_no: page_no.value,
			// keyword: querys?.keyword,
			category: types[current.value].id
		})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}

	const goPage = ({source,link}) => {
		if(!source || !link) return
		let router = 'product'
		if(source == 'firm') {
			router = 'enterprise'
		}
		uni.navigateTo({ 
			url: `/pages/${router}/detail?id=${link}`
		})
	}

	const chunkArray = (array, size) => {
    const chunkedArrays = []
    while (array.length) {
      chunkedArrays.push(array.splice(0, size))
    }
    return chunkedArrays
	}
</script>

<style lang="scss">
.page-mall {

	.goods-cat-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10px 5%;

		.cat-item {
			text-align: center;
			width: 120upx;
		}
		.cat-img {
			width: 90upx;
			height: 90upx;
		}
		.icon-category {
			font-size: 100upx;
		}
	}

	.swiper-wrap {
		height: auto;
		aspect-ratio: 16/9;
		margin-bottom: 20upx;
		.image {
			width: 100%;
			height: 100%;
			aspect-ratio: 16/9;
		}
	}

	.list-wrap {
		padding: 15px;
		.list-item {
			display: flex;

			
			.logo {
				margin-top: 10upx;
				width: 90upx;
				height: 90upx;
				border-radius: 100%;
			}

			.right {
				padding-left: 15px;
				flex: 1;
			}

			.right-head {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.enter-btn {
				color: white;
				border-radius: 100px;
				padding: 4px 8px;
			}

			.goods {
				display: flex;
				justify-content: space-between;
				padding-top: 20upx;
			}
			.good {
				width: 33%;
			}
			.image {
				aspect-ratio: 3/4;
				width: 100%;
				height: auto;
			}
		}
	}
}

</style>

